<div class="main">
    <link rel="stylesheet" href="code/css/common.css">
    <link rel="stylesheet" href="code/css/index.css">
    <style>
        #wrapper{
            background-color: #F3F3F5;
        }
        .col-sm-5 {
            width: 100%;
        }
        .layui-layer-content{
            /*background-color: #393D49;*/
            /*color: #fff;*/
            font-size: 16px;
            text-align: center;
            letter-spacing: 2px;
        }
        .layui-layer-content img{
            width: 100%;
            height: auto;
        }
        .layui-layer-title{
            display: none;
        }
        .up_load{
            width: 100%;
            display: -webkit-box;
            padding-top: 20px;
        }
        .up_load li{
            -webkit-box-flex: 1;
        }
        .up_load li img{
            width: 100px;
        }
        .upfilebox {
            position: relative;
        }
        .upfilebox input {
            width: 100px;
            height: 45px;
            position: relative;
            z-index: 9;
            opacity: 0;
        }
        .upfilebox label {
            position: absolute;
            display: inline-block;
            color: #fff;
            width: 125px;
            height: 45px;
            line-height: 36px;
            text-align: center;
            top: 0px;
            left: 0px;
            font-size: 16px;
            border-radius: 3px;
        }
        .layui-layer-nobg{
            background-color: #fff;
        }
        #editor-trigger{
            height: 420px;
        }

    </style>
    <script src="code/js/common/wangEditor.js"></script>
    <script>
        $('.preview').click(function () {
//            layer.open({
//                type: 1,
//                skin: 'bg', //加上边框
//                area: ['500px', '95%'], //宽高
//                content: $('#editor-trigger').html()
//            }).close(function(){
//                alert(1);
//            });
//            $('.layui-layer-title').text('我是预览界面O(∩_∩)O~~');
//            $('.layui-layer-content').css('color','black');
           layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true,
                area: ['500px', '95%'],
                skin: 'layui-layer-nobg',
                content:$('#editor-trigger').html()
            });


        })
    </script>

    <div class="content_title">
        <span>文章管理>>{{msg}}</span>
        <button class="common_btn preview">预览</button>
        <button class="common_btn cancel" ng-click="cancel()" ng-show="showBack">返回</button>
    </div>

    <div class="content_main">
        <table class="table article_add_table">
            <tr>
                <td>
                    图片:
                </td>
                <td id="article_col_icon" colspan="3">
                    <ul class="up_load">
                        <li>
                            <div class="upfilebox">
                                <input type="file"  id="upload_article_icon" accept="image/jpeg,image/png,image/gif"/>
                                <label class="btn btn-success " type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传图片</span>
                                </label>
                            </div>
                        </li>
                        <li>
                            <img ng-click="deletePhoto(data.icon,'icon')" ng-show="data.icon" src="{{data.icon}}" alt="">
                        </li>
                    </ul>
                    <P class="redStar">710*400</P>
                </td>
            </tr>
            <tr>
                <td>
                    <i class="redStar">*</i>
                    标题:
                </td>
                <td colspan="3">
                    <input type="text" class="common_input" ng-model="data.title">
                </td>
            </tr>
            <tr>
                <td>
                    <i class="redStar">*</i>
                    作者:
                </td>
                <td colspan="3">
                    <input type="text" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();"
                           class="title_input" ng-model="data.authorId">
                </td>
            </tr>

            <tr>
                <td>
                    <i class="redStar">*</i>
                    内容:
                </td>
                <td colspan="3">
                    <div class="container">
                        <div id="editor-trigger">

                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td rowspan="2">音频图片:</td>
                <td rowspan="2" id="audio_col_icon">
                    <ul class="up_load">
                        <li>
                            <div class="upfilebox">
                                <input type="file"  id="upload_radio_icon" accept="image/jpeg,image/png,image/gif"/>
                                <label class="btn btn-success " type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传图片</span>
                                </label>
                            </div>
                        </li>
                        <li>
                            <img ng-click="deletePhoto(data.audioIcon,'audioIcon')" ng-show="data.audioIcon" src="{{data.audioIcon}}" alt="">
                        </li>
                    </ul>
                    <P class="redStar">168*168</P>
                </td>
                <td>音频标题:</td>
                <td>
                    <input type="text" class="common_input" ng-model="data.audioTitle">
                </td>
            </tr>

            <tr>
                <td>音频作者:</td>
                <td>
                    <input type="text" class="title_input" ng-model="data.audioAuthor">
                </td>
            </tr>

            <tr>
                <td>音频文件:</td>
                <td id="audio_col_file" colspan="3">
                    <!--<input id="article_add_audio" type="file" accept="audio/mpeg" class="input_upload">-->
                    <!--<button class="delete_btn delAudioFile" ng-click="delAudioFile()">删除</button>-->
                    <ul class="up_load">
                        <li>
                            <div class="upfilebox">
                                <input type="file"  id="article_add_audio" accept="audio/mpeg"/>
                                <label class="btn btn-success " type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传音频</span>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <span class="redStar course" ng-show="data.audioLink" ng-click="delAudioFile()"  ng-bind="data.audioLink"></span>
                </td>
            </tr>

            <tr>
                <td>
                    <i class="redStar">*</i>
                    文章归属:
                </td>
                <td colspan="3">
                    <select id="article_add_type1" class="select" ng-model="selected1" ng-options="s.name for s in list">
                        <option value=""></option>
                    </select>
                    <select id="article_add_type2" class="select" ng-model="selected2" ng-options="s.name for s in selected1.child">
                        <option value=""></option>
                    </select>
                    <select id="article_add_type3" class="select"  ng-model="selected3" ng-options="s.value for s in selected2.child">
                        <option value=""></option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>外显时间:</td>
                <td colspan="3">
                    <div class="form-group">
                        <input id="article_add_releaseTime"  class="form-control layer-date" placeholder="外显时间"onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                    </div>
                </td>
            </tr>

            <tr>
                <td>排序值:</td>
                <td colspan="3">
                    <input type="number" class="id_input" ng-model="data.weight">
                </td>
            </tr>

            <tr>
                <td>
                    <i class="redStar">*</i>
                    是否显示:
                </td>
                <td colspan="3">
                    <input type="radio" id="article_add_has" value="0" name="article_add_status" checked>
                    <label for="article_add_has" class="common_label">显示</label>

                    <input type="radio" id="article_add_none" value="1" name="article_add_status">
                    <label for="article_add_none" class="common_label">隐藏</label>
                </td>
            </tr>
        </table>

        <div class="preserveCancel">
            <button class="preserve_btn" ng-click="articlePost()">保存</button>
            <button class="cancel_btn" ng-click="articleCancel()">取消</button>
        </div>
    </div>

    <div class="modal_preview">
        <img class="modal_close" src="code/css/close.png" alt="">
        <div class="modal_content">

        </div>
    </div>
</div>
